<%--
  Created by IntelliJ IDEA.
  User: 16061
  Date: 2025/3/21
  Time: 上午11:04
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<%--通过异步请求实现用户名是否可用--%>
<form action="" method="post" onsubmit="return check()">
    <%--onfocus() 获取焦点事件,就是选中了表单元素--%>
    <%--onblur() 失去焦点事件,就是不选中就失去了--%>
    <p>账号:<input type="text" name="username"
                   onblur="ajax3(this)"></p><span id="msg"></span>
    <p>密码:<input type="text" name="password" ></p>
    <p>性别:<input type="text" name="sex" ></p>
    <button>新增</button>
</form>
</body>
</html>
<!--前提:需要导入jquery环境-->
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<!--前提:导入axios环境-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    // function a() {
    //     //浏览器控制台打印信息
    //     console.log("获取焦点")
    // }
    // function b() {
    //     console.log("失去焦点")
    // }
    function  testAsync(){
        var ajax = new XMLHttpRequest();
        ajax.onreadystatechange = function () {
            if(ajax.readyState==4&&ajax.status==404){
                alert("1");
            }
        }
        ajax.open("post","abcd",true);
        ajax.send();
        alert("2");
        //同步 1 2
        //异步 2 1
    }
    // testAsync();
    /*1.使用原生js发送请求:优点 不需要导入任何环境*/
    function ajax1(input) {
        var span=document.getElementById("msg")
        //1.创建对象
        var ajax = new XMLHttpRequest();
        //2.绑定事件-->()=>{}
        ajax.onreadystatechange = function () {
            //readState监听连接状态,status请求状态码
            //连接状态:0未连接,1已连接,2请求已发送,3请求在处理,4请求已完成并响应已就绪
            if (ajax.readyState == 4 && ajax.status == 200) {
                //表示异步请求已经完成,就可以执行请求成功回调函数
                //获取服务器响应的数据
                var value=ajax.responseText;//获取服务器响应的数据
                span.innerHTML=value;
            }
        }
        //3.绑定异步请求地址
        //参数1:请求方式 get/post
        //参数2:请求地址
        //参数3:是否异步 true异步 false同步
        ajax.open("post","/checkUsername?username="+input.value,true)
        //4.发送请求
        ajax.send();
    }
    function ajax2(input) {
        //$等价于jquery
        //$.post('地址',参数,回调函数)
        $.post("/checkUsername",{"username":input.value},function (data) {
            //函数的参数data就是服务器响应的数据
            //js方式
            //document.getElementById("msg").innerHTML=data
            //jquery方式
            $("#msg").html(data)
        })
    }
    var checkUsername;
    function ajax3(input){
        axios.post("/checkUsername?username="+ input.value)
            .then(res=>{
                    checkUsername=res.data;
                    $("#msg").html(res.data);
                }
            )
    }
    function check() {
        var value=document.getElementsByName("username")[0].value
        var span=document.getElementById("msg");
        if (value==""){
            span.innerHTML="用户名不能为空";
            return false;
        }
        if (checkUsername=="用户名已经存在"){
            span.innerHTML="用户名不能重复";
            return false;
        }
        return true;
    }
</script>
